<template>
  <div class="e-wrap">
    <!-- 搜索条件 -->
    <div class="e-filter-options clearfix">
      <div class="e-filter">
        <div class="e-item">
            <span class="title">角色名称</span>
            <div class="dis-block">
                <w-select :options="roleList" v-model='queryParams.id'></w-select>
            </div>
        </div>
      </div>
      <!-- <div class="e-item">
          <span class="title">员工姓名</span>
          <div class="dis-block">
              <w-input :holder="`请填写`"></w-input>
          </div>
      </div>
      <div class="e-item">
          <span class="title">手机号码</span>
          <div class="dis-block">
              <w-input :holder="`请填写`"></w-input>
          </div>
      </div> -->
      <!-- 搜索按钮 -->
      <div class="e-btn">
          <w-button style='margin-left:20px;' @on-click="changePage(1)">搜索</w-button>
      </div>
    </div>
    <!-- 角色列表 -->
    <div class="e-filter-list">
      <div class="e-add clearfix">
          <w-button @on-click="addRole">新增角色</w-button>
          <span>共计：{{roleAllList.totalCount}}条</span>
      </div>
      <!-- 列表数据 -->
      <div class="e-list clearfix" v-if="roleAllList.totalCount">
        <table>
          <tr class="table-h">
            <th>角色编码</th>
            <th>角色名称</th>
            <th>角色描述</th>
            <th>详情</th>
          </tr>
          <tr v-for="(val, index) in roleAllList.recordList" :key="index">
            <td>{{val.roleCode}}</td>
            <td>{{val.roleName}}</td>
            <td>{{val.roleDescription}}</td>
            <td v-if="val.roleCode != 'SADMIN'">
              <span class="cur" @click="modifyRole(val.roleCode, val.roleName, val.roleDescription, val.id)">编辑 |</span>
              <span class="cur" @click="delPanel = true; delParams.ids = [val.id]">删除 |</span>
              <span class="cur" @click="$router.push(`/roleMange/add?three=${$route.query.three}&code=${val.roleCode}&name=${val.roleName}&desc=${val.roleDescription}&id=${val.id}&seeState=true'`)">查看</span>
            </td>
            <td v-else></td>
          </tr>
        </table>
        <!-- 分页 -->
        <div class="fr" style="margin-top: 55px">
          <w-paging :current="roleAllList.currentPage" :total="roleAllList.pageCount" @on-page='changePage'></w-paging>
        </div>
      </div>
      
      <!-- 没有数据时 -->
      <div v-else style="text-align: center;line-height: 50px;">暂无数据</div>
    </div>

    <!-- 删除角色 -->
    <w-panel-fixed-wrap v-model="delPanel"  :panel-title="true" title="删除角色" :width="`260px`" :height="`200px`" @on-confirm='delOption'>
      <div class="panel-classify">
        是否确认删除角色
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiSystemMange } from 'js/api'
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        currentPage: '1',
        showCount: '10',
        id: ''
      },
      roleAllList: [],
      delPanel: false,
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        ids: []
      }
    }
  },
  created() {
    this.fetchRole({threeMenuCode: this.$route.query.three, token: this.token})
    this._getRoleList()
  },
  computed: {
    ...mapGetters(['token', 'roleList'])
  },
  methods: {
    ...mapActions(['fetchRole']),
    addRole() {
      this.$router.push(`/roleMange/add?three=${this.$route.query.three}`)
    },
    _getRoleList() {
      this.queryParams.accessToken = this.token
      apiSystemMange.getRoleLis(this.queryParams).then(data => {
        if (data.code != '200') return
        this.roleAllList = data.data
      })
    },
    // 删除角色
    delOption() {
      this.delParams.accessToken = this.token
      apiSystemMange.delRole(this.delParams).then(data => {
        if (data.code != '200') return
        this.$toast('删除成功', () => {
          this.delPanel = false
          this.changePage(1)
        })
      })
    },
    changePage(page) {
      this.queryParams.currentPage = page
      this._getRoleList()
    },
    // 编辑角色
    modifyRole(code, name, desc, id) {
      if (!desc) {
        desc = ''
      }
      this.$router.push(`/roleMange/add?three=${this.$route.query.three}&code=${code}&name=${name}&desc=${desc}&id=${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-filter-options {
    border-bottom: 1px solid $border-gray-light;
    padding-bottom: 20px;
    // .filter-btn {
    //   margin: 40px auto 20px;
    //   text-align: center;
    // }
}
.e-filter-list {
    width: 100%;
    .e-add {
        margin: 20px 0;
        span {
            float: right;
            color: rgba(49, 49, 49, 1);
            line-height: 20px;
        }
    }
}
</style>